<script setup lang="ts">
import {Message, TableColumnData} from "@arco-design/web-vue";
import {deleteModule, listModule} from "@/services/moduleApi.ts";
import {onMounted, ref} from "vue";
import type {ModuleType, ModuleTypeList} from "@/types/moduleType.ts";
import {tableBorder} from "@/utils/border/table-border.ts";
import ModuleDialog from "@/pages/review/module/ModuleDialog.vue";
import useModal from "@/hooks/useModal.ts";

const columns: TableColumnData[] = [
  {
    title: "模块名称",
    key: "moduleName",
    dataIndex: "moduleName",
    width: 200,
    align: 'center',
  },
  {
    title: "评审开始时间",
    key: "reviewStartTime",
    dataIndex: "reviewStartTime",
    width: 200,
    align: 'center'
  },
  {
    title: "评审结束时间",
    key: "reviewEndTime",
    dataIndex: "reviewEndTime",
    width: 200,
    align: 'center'
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 100,
    align: 'center',
    slotName: 'action'
  },
]

const { ModalShow, ModalHide, ModalLoading } = useModal()

const data = ref<ModuleTypeList[]>([])

const dialogRef = ref<{
  init: () => void
  edit: (row: ModuleType) => void
}>()

const getList = () => {
  listModule().then(res => {
    if (res.code === 200) {
      data.value = res.data
    }
  })
}

const handleEdit = (row: ModuleTypeList) => {
  dialogRef.value?.edit(row)
}

const handleDelete = (row: ModuleTypeList) => {
  ModalShow({
    content: "请确认是否删除当前模块，删除后将同时删除该模块的评分标准、专家组。"
  }).then(() => {
    deleteModule({
      id: row.id
    }).then(res => {
      if (res.code === 200) {
        Message.success("删除成功")
        ModalHide()
      }
    }).finally(() => {
      ModalHide()
      getList()
    })
  })
}

const handleAdd = () => {
  dialogRef.value?.init()
}

onMounted(getList)
</script>

<template>
  <a-space  direction="vertical" class="container">
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button type="outline" @click="handleAdd">新增</a-button>
        </a-space>
      </div>
      <a-table
          :columns="columns"
          :data="data"
          :bordered="tableBorder"
      >
        <template #action="{record}">
          <a-space >
            <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
            <a-button type="primary" status="danger" @click="handleDelete(record)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </a-space>

  <ModuleDialog @list="getList" ref="dialogRef" />
</template>

<style scoped lang="scss">

</style>